<template>
  <div class="comparion">
    <div class="title">选择不同的术式，也有不同的价格：</div>
    <div class="items">
      <ul>
        <li @click="changeItem('project')">假体隆鼻</li>
        <li @click="changeItem('case')">注射隆鼻</li>
        <li @click="changeItem('project')">达拉斯隆鼻</li>
      </ul>
    </div>
    <div class="clear"></div>
    <component :is="curCom"></component>
  </div>
</template>
<script>
import Project from "./Project";
import Case from "./Case";
export default {
  name: "comparison",
  data() {
    return {
      curCom: "project"
    };
  },
  components: {
    Project,
    Case
  },
  methods: {
    changeItem(name) {
      this.curCom = name;
    }
  }
};
</script>
<style lang="scss" scoped>
.comparion {
  padding: 10px;
  .title {
    font-size: 16px;
    line-height: 20px;
    margin: 20px;
  }
  .clear {
    clear: both;
  }
  .items {
    ul {
      border: 0.5px solid black;
      li {
        line-height: 30px;
        float: left;
        padding: 10px;
        border-left: 1px solid black;
      }
    }
  }
}
</style>
